<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color:red;
    }
    .one {
      background-color: lightyellow;
      border: 1px solid blue;
      padding: 2px 5px;
    }
  </style>
  <!--引入vue-->
  <script src="../vue.js"></script>
</head>
<body>
  <div class="d">
    <h1>1. v-model:双向数据绑定指令（模型与视图互相绑定） <hr size="5" color="red"></h1>
    <!--1.1 基本用法-->
    {{msg}} <br>
    普通用法：<input type="text" v-model="msg"> <br>
    <!--1.2 lazy: 懒加载修饰符，当我们输入框中输入内容后才有在按下回车才会同步-->
    懒加载：<input type="text" v-model.lazy="msg"> <br>
    <!--1.3 number修饰符：会自动将输入的数值型数字符串转换为数字,相当于parseInt()函数-->
    输入值的类型：{{typeof num}} <br>
    数值转换：<input type="text" v-model.number="num"> <br>
    <!--1.4 trim修饰符:会自动去除空格-->
    输入字符串经过处理后：{{info}} <br>
    处理字符串空格：<input type="text" v-model.lazy.trim="info"><br>

    <h1>2. v-on：事件处理 <hr size="5" color="red"></h1>
    <!--2.1 单个事件处理-->
    <!--<button v-on:click="addNum">+</button>{{num}} <button @click="minusNum">-</button>-->
    <!--2.2 多个事件处理,{}中：号前是事件名，：号后是事件处理函数，多个事件使用，号分开-->
    <!--<button v-on={click:addNum,mouseover:addNum}>+</button>{{num}} <button v-on={click:minusNum,mouseover:minusNum}>-</button>-->
    <!--2.3 向事件函数传递参数-->
    <!--v-on的简写是@-->
    <button @click="addNum">+</button>{{num}} <button @click="minusNum('张三',20,$event)">-</button>

    <h1>3. v-bind：绑定页面元素的属性与样式(由模型向视图绑定，单向绑定) <hr size="5" color="red"></h1>
    <!-- 3.1 绑定属性,v-bind的缩写为: -->
    <p v-bind:title="title">这是段落</p>
    <!--3.2 绑定样式类,绑定一个值,下面例子表示：如果isActive变量值为true,则绑定active样式-->
    <button :class="{ active: isActive }" >我是按钮1</button>
    <!--3.3 绑定多个样式类-->
    <button :class="{ active: isActive, one: true, two: false }" @click="btnClick">我是按钮2</button>
    <br>
    <!--3.4 绑定行内样式style-->
    <h2 v-bind:style="{ color: fontColor, fontSize: fontSize + 'px' }">哈哈哈哈</h2>
    <!-- 3.5 动态的绑定属性, 这个属性是一个对象 -->
    <h2 :style="objStyle">呵呵呵呵</h2>
  </div>
</body>
</html>
<script>
  let vs = new Vue({
    // 1. 指定vue的视图模板
    el: '.d',
    // 2. 存放的模型数据
    data: {
      msg: 'hello,msg',
      num: 0,
      info: '',
      title: '这是使用v-bind出现的提示信息！',
      isActive:true,
      fontColor: 'red',
      fontSize: 25,
      objStyle: {
        fontSize: '50px',
        color: "green"
      }
    },
    // 3. 定义普通方法
    methods: {
      // 3.1 加num的值,默认传递事件参数
      addNum(event) {
        this.num ++
        console.log("事件参数：",event)
      },
      // 3.2 减num的值(传递事件对象参数及其它参数，注意：此时事件对象参数要放在最后)
      minusNum(name,age,event) {
        console.log("name:",name)
        console.log("age:",age)
        console.log("event:",event)
        this.num --
        if (this.num <= 0) {
          this.num = 0
        }
      }
    },

  })
</script>
